<!DOCTYPE html>
<html>
<head>
<title>Gravitational Orbit Diagram</title>
</head>
<body>

<canvas id="myCanvas" width="600" height="350" style="border:1px solid #d3d3d3;"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Coordinates and dimensions ---
    const y_center = 150;
    const x_M = 150;
    const x_m = 450;
    const dotRadius = 6;
    const arrowLength = 100;
    const arrowHeadSize = 10;
    const y_arrow_end = y_center - arrowLength;
    const x_mid = (x_M + x_m) / 2;
    
    // --- Helper function to draw an arrow ---
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        
        // Draw the line
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        // Draw the arrowhead
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Draw Diagram Elements ---

    // Draw mass M (dot and label)
    ctx.beginPath();
    ctx.arc(x_M, y_center, dotRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('M', x_M, y_center + 30);

    // Draw mass m (dot and label)
    ctx.beginPath();
    ctx.arc(x_m, y_center, dotRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('m', x_m, y_center + 30);

    // Draw the connecting line between M and m
    ctx.beginPath();
    ctx.moveTo(x_M, y_center);
    ctx.lineTo(x_m, y_center);
    ctx.stroke();
    
    // Draw label r₀ (with subscript)
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('r', x_mid - 5, y_center - 15);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('0', x_mid + 7, y_center - 12);

    // Draw the velocity vector v₀
    drawArrow(ctx, x_m, y_center, x_m, y_arrow_end, arrowHeadSize);
    
    // Draw label v₀ (with subscript)
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('v', x_m + 20, y_arrow_end + 10);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('0', x_m + 32, y_arrow_end + 13);
    
    // Draw the caption
    ctx.font = '22px "SimSun", "STSong"'; // Use a common Chinese font
    ctx.fillText('力图 4.3.1', x_mid, 300);

</script>

</body>
</html>